<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="resetQuery"
					style="float:right;margin-right:10px;">重置</el-button>
				<!-- <el-button type="text" icon="el-icon-plus" @click="addQuery">新建审批</el-button> -->
			</div>
			<el-form-item label="时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" size="small">
				</el-date-picker>
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="tastList">
			<!-- <el-table-column label="项目编号" align="center" prop="projectNo" /> -->
			<el-table-column label="审批流名称" align="center" prop="activitiName" />
			<el-table-column label="项目名称" align="center" prop="projectName" />
			<el-table-column label="审批人" align="center" prop="userName" />
			<el-table-column label="创建时间" align="center" prop="createTime" />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<!-- <el-button size="mini" type="text" icon="el-icon-info" @click="deleteId(scope.row)">删除
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-info" @click="updateId(scope.row)">修改
					</el-button> -->
					<el-button size="mini" type="text" icon="el-icon-info" @click="dealIt(scope.row,0)">通过
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-info" @click="dealIt(scope.row,1)">驳回
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-info" @click="lookProduct(scope.row)">详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<el-dialog :title="title" :visible.sync="open" v-if="open" width="500px" append-to-body>
			<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
				<el-form-item label="审批流名称">
					<el-input v-model="form.activitiName"></el-input>
				</el-form-item>
				<el-form-item :label="indexs+1+'级审批'" v-for="(items,indexs) in peopleList">
					<el-select v-model="items.id" filterable style="width:80%">
						<el-option :label="item.name" :value="item.id" v-for="item in userList"></el-option>
					</el-select>
					<el-button style="float:right;" @click="deletePeople(items,indexs)">删除</el-button>
				</el-form-item>
				<el-button style="float:right;" @click="addPerson">添加审批人</el-button>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="open = false">取 消</el-button>
			</div>
		</el-dialog>


		<el-dialog title="详情" :visible.sync="detailModel" :close-on-click-modal="false" :close-on-press-escape="false"
			width="60%">
			<el-tabs :tab-position="tabPosition" @tab-click="tabClicks">
				<!-- 项目概述 -->
				<el-tab-pane label="项目概述">
					<div>
						<el-form ref="detailForm" :model="detailForm" label-width="100px" :rules="rules">
							<el-row>
								<!-- {{detailForm}} -->
								<el-col :span="8">
									<el-form-item label="项目名称" prop="projectName">
										<el-input v-model="detailForm.projectName" placeholder="请输入项目名称"
											disabled></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="关联产品" prop="projectName">
										<el-input v-model="detailForm.projectName" placeholder="请输入项目关联产品"
											disabled></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="优先级" prop="level">
										<el-select filterable v-model="detailForm.level" disabled>
											<el-option value="低" label="低"></el-option>
											<el-option value="中" label="中"></el-option>
											<el-option value="高" label="高"></el-option>
											<el-option value="紧急" label="紧急"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="项目描述" prop="projectDesc">
								<el-input type="textarea" v-model="detailForm.projectDesc" placeholder="请输入描述"
									maxlength="1000" disabled show-word-limit></el-input>
							</el-form-item>

						</el-form>
					</div>
				</el-tab-pane>
				<el-tab-pane label="项目动态">
					<el-timeline :reverse="true">
						<div style="height:400px;overflow-y:scroll;">
							<el-timeline-item v-for="item in projectLogList">
								<p>{{item.name}}</p>
								<p>于{{item.createTime}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作{{item.detail}}
								</p>
							</el-timeline-item>
						</div>
					</el-timeline>
				</el-tab-pane>
				<el-tab-pane label="需求功能点梳理">
					<table class="table">
						<thead>
							<td>序号</td>
							<td>运营功能点</td>
							<td>运营确认时间</td>
							<td>技术功能点</td>
							<td>技术确认时间</td>
						</thead>
						<tr v-for="(item,index) in yunyingPointList">
							<td>{{yunyingPointList[index].order}}</td>
							<td>{{yunyingPointList[index].projectFunc}}</td>
							<td>{{yunyingPointList[index].createTime}}</td>
							<td>{{technologyPointList[index].projectFunc}}</td>
							<td>{{technologyPointList[index].createTime}}</td>
						</tr>
					</table>
				</el-tab-pane>
			</el-tabs>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detailModel = false">关 闭</el-button>
			</span>
		</el-dialog>


		<el-dialog title="驳回原因" :visible.sync="approveDialog" v-if="approveDialog" width="500px" append-to-body>
			<el-form :model="form" ref="form" label-width="100px" class="demo-dynamic">
				<el-form-item label="驳回原因">
					<el-input v-model="form.reason"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm2">确 定</el-button>
				<el-button @click="approveDialog = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		selActivitiList,
		insertActiviti,
		updateActiviti,
		selectUser,
		selTaskList,
		updateTask,
		selMission,
		selProjectLog,
		selProductList,
		selFunc
	} from '@/api/workOrder.js'
	export default {
		name: "Leave",
		data() {
			return {
				id: '',
				definitionKey: '',
				businessKey: '',
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 请假表格数据
				tastList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				// 表单参数
				form: {

				},
				// 表单校验
				rules: {},
				peopleList: [],
				userList: [],

				tabPosition: "left",
				personDialog: false,
				documentDialog: false,
				technologyPointList: [],
				yunyingPointList: [],
				timeModel: [],
				stateList: [],
				detailForm: {},
				projectLogList: [],
				projectUserList: [],
				fileList: [],
				programForm: {},
				detailModel: false,
				productList: [],
				approveDialog: false,
				selectRow: {}
			};
		},
		created() {
			this.getList();
			this.selectUser();
			this.selProductList();
		},
		methods: {
			// 查看项目详情
			lookProduct(row) {
				var that = this;
				that.detailForm = row;
				debugger
				// that.programForm.projectNo = row.projectNo
				that.detailModel = true;
				// that.selectUser();
				// that.selMission();
			},
			// 查询产品列表
			selProductList() {
				var that = this;
				selProductList({
					pageNum: 1,
					pageSize: 1000
				}).then(res => {
					that.productList = res.rows
					console.log(res.rows);
				})
			},
			submitForm2() {
				this.selectRow.status = 2;
				this.selectRow.reason = this.form.reason
				this.$confirm('确认操作?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//同意
					updateTask({
						...this.selectRow
					}).then(res => {
						if (res > 0) {
							this.getList();
							this.approveDialog = false
							this.$message.success("驳回成功");
						} else {
							this.$message.error("驳回审批");
						}
					})
				}).catch(() => {
					that.$message.info("操作取消");
				})
			},
			dealIt(row, t) {
				var that = this;
				if (t == 0) {
					//同意
					this.$confirm('确认操作?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//同意
						row.status = 1;
						updateTask({
							...row
						}).then(res => {
							if (res > 0) {
								this.getList();
								this.$message.success("审批成功");
							} else {
								this.$message.error("审批失败");
							}
						})
					}).catch(() => {
						that.$message.info("操作取消");
					})
				} else {
					// 驳回
					row.status = 2;
					that.selectRow = row;
					that.approveDialog = true;
				}


			},
			//tab点击
			tabClicks(tab, event) {
				var that = this;
				that.selectUser();
				switch (tab.index) {
					case "0":
						that.selProjectPerson();
						break
					case "1":
						that.selProjectLog();
						break
					case "2":
						that.selFunc();
						break
					default:
						break
				}
			},
			selFunc() {
				var that = this;
				selFunc({
					pageNum: 1,
					pageSize: 1000,
					projectFuncType: 'BUSINESS',
					projectNo: that.detailForm.projectNo
				}).then(res2 => {
					that.yunyingPointList = res2.rows;
					selFunc({
						pageNum: 1,
						pageSize: 1000,
						projectFuncType: 'TECHNOLOGY',
						projectNo: that.detailForm.projectNo
					}).then(res => {
						if (res.rows.length == 0) {
							that.technologyPointList = [];
							for (var i = 0; i < that.yunyingPointList.length; i++) {
								that.technologyPointList.push({});
							}
						} else {
							that.technologyPointList = res.rows;
						}
						that.technologyTimeList = that.technologyPointList;
					})

				})
			},
			selectUser(t) {
				var that = this;
				selectUser({
					code: t
				}).then(res => {
					that.userList = res.rows;
				})
			},
			deleteId(row) {

			},
			selProjectLog() {
				var that = this
				selProjectLog({
					projectNo: that.detailForm.projectNo
				}).then(res => {
					that.projectLogList = res.rows;
				})
			},
			//查询项目阶段
			selMission() {
				var that = this;
				selMission({
					pageNum: 1,
					pageSize: 1000,
					projectNo: that.detailForm.projectNo,
					types: 'all'
				}).then(res => {
					res.rows.forEach(item => {
						item.state = item.funcId;
						item.timeModel = [item.startTime, item.endTime]
					})
					that.technologyTimeList = res.rows
					console.log(res.rows);
				})
			},
			updateId(row) {
				this.title = "修改"
				this.form = row;
				this.open = true;
				this.peopleList = [];
				var nameArr = row.userName.split(",");
				var idArr = row.userId.split(",");
				for (var i = 0; i < nameArr.length; i++) {
					this.peopleList.push({
						id: idArr[i],
						name: nameArr[i]
					})
				}
			},
			submitForm() {
				if (!this.form.activitiName || this.form.activitiName.length <= 0) {
					return this.$message.error("请输入审批流名称");
				}
				var peopleList = this.peopleList;

				if (peopleList.length <= 0) {
					return this.$message.error("请选择审批人");
				}
				var nameArr = [];
				var idArr = [];
				for (var i = 0; i < peopleList.length; i++) {
					for (var j = 0; j < this.userList.length; j++) {
						if (peopleList[i].id == this.userList[j].id) {
							idArr.push(this.userList[j].id)
							nameArr.push(this.userList[j].name)
						}
					}
				}
				var nameStr = nameArr.join(",");
				var idStr = idArr.join(",");
				if (this.form.id) {
					updateActiviti({
						userName: nameStr,
						userId: idStr,
						activitiName: this.form.activitiName,
						id: this.form.id
					}).then(res => {
						if (res > 0) {
							this.$message.success("修改成功");
							this.open = false;
							this.getList();
						} else {
							this.$message.error("修改失败");
						}
					})
				} else {
					insertActiviti({
						userName: nameStr,
						userId: idStr,
						activitiName: this.form.activitiName
					}).then(res => {
						if (res > 0) {
							this.$message.success("新增成功");
							this.open = false;
							this.getList();
						} else {
							this.$message.error("新增失败");
						}
					})
				}
			},
			deletePeople(item, indexs) {
				this.peopleList.splice(indexs, 1)
			},
			addPerson() {
				this.peopleList.push({});
			},
			addQuery() {
				this.title = "新增"
				this.open = true;
			},
			refuse(row) {
				refuseTWait(row).then(res => {
					if (res.code == 200) {
						this.getList();
						this.$message.success("审批成功");
					} else {
						this.$message.error("审批失败");
					}
				}).catch(err => {
					this.$message.error("审批失败");
				})
			},
			agree(row) {
				agreeeTWait(row).then(res => {
					if (res.code == 200) {
						this.getList();
						this.$message.success("审批成功");
					} else {
						this.$message.error("审批失败");
					}
				}).catch(err => {
					this.$message.error("审批失败");
				})
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
			},


			/** 查询请假列表 */
			getList() {
				if (this.timeModel && this.timeModel.length > 0) {
					this.queryParams.startTime = this.timeModel[0];
					this.queryParams.endTime = this.timeModel[1];
				}
				selTaskList({
					...this.queryParams
				}).then(res => {
					if (res.code == 200) {
						this.tastList = res.rows;
						this.total = res.total;
					}
				})
			},

		}
	};
</script>
<style scoped lang='scss'>
	.table {
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		border-style: solid;
		border-width: 1px;
		border-color: #d1d1d1;
	}

	.table td {
		border-style: solid;
		border-width: 1px;
		border-color: #d1d1d1;
		padding: 10px;
	}

	thead td {
		font-weight: bold;
	}
</style>